<template>
  <div class="div_box">
    <el-dialog title="设备报警信息" :visible.sync="dialogVisible" v-if="dialogVisible" top="8vh" @close="cancelAddDia"
      :modal="true" :modal-append-to-body="false" :close-on-click-modal="false" :class="{
        unel_dialog: dialogAlarmInfo.status == 1,
        another_class: dialogAlarmInfo.alarmType == 30,
      }">
      <span slot="title" class="dialog-title">
        <!-- <el-image :src="alarm" class="alarmGif"></el-image> -->
        <i class="iconfont gaojing1 alarmGif"></i>
        <div class="title">
          <span>{{ dialogAlarmInfo.orgName }}{{ dialogAlarmInfo.name }}</span>
          <span>{{ dialogAlarmInfo.createTime }}</span>
          <span>
            <!-- {{ dialogAlarmInfo.deviceType | deviceTypeText }} -->
            {{ namealarm }}
            发生告警</span>
          <div @click="onAlarm" v-if="dialogAlarmInfo.status == 1">
            <i class="iconfont shengyin"></i>{{ isAudioFlag ? "消除告警音" : "开启告警音" }}
          </div>
          <div v-if="alarmPlayFlag" @click="onplayback">
            <i class="iconfont dianbohuifang"></i>告警回放
          </div>
        </div>
      </span>
      <!-- 摄像机 -->
      <div class="content" v-if="dialogAlarmInfo.alarmType == '30'">
        <div class="content_center">
          <content_center :dialogAlarmInfo="dialogAlarmInfo" :tableData="tableData" @Alarmchuli="Alarmchuli"
            @oncommand="oncommand" @addSubmit="addSubmit" @onVoiceLog="onVoiceLog" ref="refcontent_center"
            class="content_center2" :detail="detail" style="height: 100%"
            :show="dialogAlarmInfo.alarmType != '30' ? true : false">
          </content_center>
        </div>
        <div class="content_right">
          <right_responder ref="refright_responder" class="responder" :dialogAlarmInfo="dialogAlarmInfo">
          </right_responder>

          <content_right ref="refcontent_right" class="content-right" :dialogAlarmInfo="dialogAlarmInfo"
            @clickIchnography="clickIchnography"></content_right>
        </div>
      </div>

      <!-- 探测器 -->
      <div class="content" v-else-if="detail.parentDeviceCode">
        <div class="content_left">
          <organization ref="reforganization" class="organization">
          </organization>
          <fireControlRoom ref="reffireControlRoom" class="cassociated" :fcrDutyUserRelatedVO="fcrDutyUserRelatedVO">
          </fireControlRoom>
          <associated ref="refassociated" class="cassociated" :detail="detail" @getpauseAudio="getpauseAudio">
          </associated>
          <!-- <content_left ref="refcontent_left" @onvideoDetails="onvideoDetails" @gridding="gridding"
                        class="record" style="height: 43%">
                    </content_left> -->
          <content_command ref="refcontent_command" class="command" :commadn="commadn"
            @getKeyCommandsend="getKeyCommandsend">
          </content_command>
        </div>
        <div class="content_center">
          <!-- <content_Parent ref="refcontent_Parent" :detail="detail" class="content_center1"
                        @getpauseAudio="getpauseAudio">
                    </content_Parent> -->
          <content_center :dialogAlarmInfo="dialogAlarmInfo" :tableData="tableData" @Alarmchuli="Alarmchuli"
            @oncommand="oncommand" @addSubmit="addSubmit" @onVoiceLog="onVoiceLog" ref="refcontent_center"
            class="content_center2" :detail="detail" style="height: 100%"
            :show="dialogAlarmInfo.alarmType != '30' ? true : false">
          </content_center>
        </div>
        <div class="content_right">
          <right_video ref="refright_video" class="refright-video" @gridding2="gridding2"
            :frontDeviceRelatedVO="frontDeviceRelatedVO" v-if="frontDeviceRelatedVO.length != 0"></right_video>

          <right_responder ref="refright_responder" class="responder" :dialogAlarmInfo="dialogAlarmInfo" v-else>
          </right_responder>

          <content_right ref="refcontent_right" class="content-right" :dialogAlarmInfo="dialogAlarmInfo"
            @clickIchnography="clickIchnography"></content_right>
        </div>
      </div>

      <!-- 设备列表 -->
      <div class="content" v-else>
        <div class="content_left">
          <organization ref="reforganization" class="organization">
          </organization>
          <content_left ref="refcontent_left" @onvideoDetails="onvideoDetails" @gridding="gridding" class="record"
            style="height: 68%">
          </content_left>
        </div>
        <div class="content_center">
          <content_center :dialogAlarmInfo="dialogAlarmInfo" :tableData="tableData" @Alarmchuli="Alarmchuli"
            @oncommand="oncommand" @addSubmit="addSubmit" @onVoiceLog="onVoiceLog" ref="refcontent_center"
            class="content_center2" :detail="detail" style="height: 100%"
            :show="dialogAlarmInfo.alarmType != '30' ? true : false">
          </content_center>
        </div>
        <div class="content_right">
          <right_responder ref="refright_responder" class="responder" :dialogAlarmInfo="dialogAlarmInfo">
          </right_responder>

          <content_right ref="refcontent_right" class="content-right" :dialogAlarmInfo="dialogAlarmInfo"
            @clickIchnography="clickIchnography"></content_right>
        </div>
      </div>
    </el-dialog>

    <WarnHandle :alarmInfo="dialogAlarmInfo" :detail="detail" :fcrDutyUserRelatedVO="fcrDutyUserRelatedVO"
      ref="refWarnHandle" @updateAlarmList="updateAlarmList"></WarnHandle>
    <Command ref="refCommand" :tableData="tableData" :detail="detail" :dialogAlarmInfo="dialogAlarmInfo"></Command>
    <camara ref="refCamara" @onvideoDetails="onvideoDetails"></camara>
    <liveMacrovision ref="refliveMacrovision"></liveMacrovision>
    <FluoriteVideo ref="refFluoriteVideo"></FluoriteVideo>
    <EZUIKitJs ref="refEZUIKitJs"></EZUIKitJs>
    <Ichnography ref="refIchnography"></Ichnography>
    <voice-log :alarmId="dialogAlarmInfo.id" ref="refVoiceLog"></voice-log>
      <playback ref="refplayback" :alarmPlayList="alarmPlayList"></playback>

    <!-- 二次确认 -->
    <el-dialog title="确认提示" :visible.sync="dialogVisibleFinish" width="480px" :before-close="closeDialogFinish"
      :modal-append-to-body="false" :close-on-click-modal="false" :modal="true" class="finish">
      <div>是否确认完结？完结后不能再次处理！</div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="submitFinish" v-preventReClick="1000">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="确认提示" :visible.sync="dialogVisibleFinish2" width="480px" :before-close="closeDialogFinish2"
      :modal-append-to-body="false" :close-on-click-modal="false" :modal="true" class="finish">
      <div>此操作将下发 {{ keyCommandsend.keyName }} 指令, 是否继续?</div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="submitFinish2" v-preventReClick="1000">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import content_left from "./content_left.vue";
import content_command from "./content_command.vue";
import organization from "./organization.vue";
import associated from "./modeuls/associated.vue"; //关联设备
import fireControlRoom from "./modeuls/fireControlRoom.vue"; //关联设备
import content_center from "./content_center.vue";
import content_Parent from "./content_Parent.vue";
import content_right from "./content_right.vue";
import right_responder from "./modeuls/right_responder.vue"; //接警人
import right_video from "./modeuls/right_video.vue"; //视频监控

import WarnHandle from "./WarnHandle.vue"; //告警弹窗
import Command from "./modeuls/Command.vue"; //指令弹窗
import camara from "./camara.vue";
import liveMacrovision from "./liveMacrovision.vue"; //宏视
import FluoriteVideo from "./videoSurveillance/FluoriteVideo.vue"; //萤石云
import EZUIKitJs from "./videoSurveillance/EZUIKitJs.vue"; //萤石云 轻应用
import Ichnography from "../components/Ichnography.vue"; //平面图
import playback from "./playback.vue";//回放
import {
  reqFloorById,
  reqClosedLoop,
  reqKeyCommandSend,
  reqDetector,
  reqDetectorProductList,
  reqKeyCommandList,
  reqGetDetails,
  reqDetectorDxtend,
  reqAlarmPlay
} from "@api/api.js";
import { mapState } from "vuex";
import VoiceLog from "./voiceLog.vue";

export default {
  props: ["dialogAlarmInfo", "isAudio", "alarmDialogFlag"],
  components: {
    content_left,
    right_video,
    content_command,
    organization,
    associated,
    fireControlRoom,
    content_center,
    content_Parent,
    content_right,
    right_responder,
    WarnHandle,
    Command,
    camara,
    liveMacrovision,
    FluoriteVideo,
    Ichnography,
    VoiceLog,
    EZUIKitJs,
    playback,
  },
  data() {
    return {
      dialogVisible: false,
      alarm: require("@assets/images/alarm.gif"),
      alarmInfo: {},
      dialogVisibleFinish: false, //二次确认弹窗
      isAudioFlag: null,
      dialogVisibleFinish2: false,
      keyCommandsend: {},
      detail: {},
      detectorProductList: [],
      namealarm: "",
      tableData: [],
      commadn: [],
      fcrDutyUserRelatedVO: [],
      frontDeviceRelatedVO: [],
      alarmPlayFlag: false,
    };
  },
  computed: {
    ...mapState(["user", "datav"]),
  },
  watch: {
    // 防止弹出新的告警没声音
    alarmDialogFlag(e) {
      this.isAudioFlag = this.isAudio;
    },
    dialogVisible(e) {
      if (e) {
        // console.log(this.dialogAlarmInfo, 'this.dialogAlarmInfo');
        this.$nextTick(async () => {
          this.getDetectorProductList();
          this.getAlarmPlay()
          if (this.dialogAlarmInfo.subDeviceCode) {
            await this.getDetector(this.dialogAlarmInfo.subDeviceCode);
          }
          if (this.detail.parentDeviceCode) {
            // 探测器
            this.getKeyCommand(); // 探测器按键指令列表
            this.$refs.reforganization.getOrgSuperLevelInfo(
              this.dialogAlarmInfo.orgId
            ); //机构详情
            await this.getGetDetails(this.detail.parentDeviceCode); // 消控室列表
            if (this.frontDeviceRelatedVO.length != 0) {
              await this.$refs.refright_video.GetCamera();
            }
          } else if (this.dialogAlarmInfo.alarmType == "30") {
            // 摄像机弹窗
          } else {
            // 设备列表
            this.$refs.reforganization.getOrgSuperLevelInfo(
              this.dialogAlarmInfo.orgId
            ); //机构详情
            this.$refs.refcontent_left.GetCamera(
              this.dialogAlarmInfo.spaceId,
              this.dialogAlarmInfo.id
            ); // 安装点查询摄像头 1583020697800630273
          }
          this.$refs.refcontent_center.onProductList(); //获取产品列表
          this.$refs.refcontent_center.getDeviceDataget(
            this.dialogAlarmInfo.imei
          ); //imei查询最新设备数据
          this.$refs.refcontent_right.getFloorById(
            this.dialogAlarmInfo.spaceId
          ); // 查询平面图以及楼层id
          this.$refs.refright_responder.getByTargetId(
            this.dialogAlarmInfo.spaceId
          ); // 安装点id获取接警人列表
          this.$refs.refright_responder.PageSmsLog(this.dialogAlarmInfo.id);
        });
      }
    },
  },
  methods: {
    // 告警id查询告警视频列表回放
    async getAlarmPlay() {
      const res = await reqAlarmPlay(this.dialogAlarmInfo.id);
      console.log(res);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      if (res.data.row.length == 0) {
        this.alarmPlayFlag = false;
        return;
      }
      this.alarmPlayFlag = true;
      // this.alarmPlayList=res.data.row;
      this.alarmPlayList = JSON.parse(JSON.stringify(res.data.row));
    },
      onplayback() {
      this.$refs.refplayback.dialogPlayback = true;
    },
    // 消控室列表
    async getGetDetails(parentDeviceCode) {
      let res = await reqGetDetails(parentDeviceCode);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      // console.log(res,'res');
      this.fcrDutyUserRelatedVO = res.data.info.fcrDutyUserRelatedVO || [];
      this.frontDeviceRelatedVO =
        res.data.info.frontDeviceRelatedVO.filter(
          (device) => device.deviceType === "Camera"
        ) || [];
      this.frontDeviceRelatedVO = this.frontDeviceRelatedVO.filter(
        (item) => item.classMark == "V380" || item.protocol == "4"
      ); //只添加宏视  ||萤石云
      this.frontDeviceRelatedVO.forEach((item) => {
        if (item.protocol == "4") {
          // 通信协议 萤石协议
          item.deviceId = item.sn.slice(-4);
        }
      });
      // console.log(this.frontDeviceRelatedVO,'res');
    },
    // 探测器按键指令列表
    async getKeyCommand() {
      this.tableData = [];
      this.commadn = [];
      var res = await reqKeyCommandList({
        screen: "1",
        deviceCode: this.detail.parentDeviceCode, //主机设备编号
        usedConfig: "1", //是否配置指令 1已配置 2未配置
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      // console.log(res.data.list,'list',this.detail);
      res.data.list.forEach((item) => {
        if (item.detectorType == this.detail.detectorType) {
          this.tableData.push(item);
        }
        if (item.layoutType == 1) {
          this.commadn.push(item);
        }
      });
      // 处理相同数据
      this.tableData = this.tableData.reduce((acc, item) => {
        const existingItem = acc.find(
          (i) => i.addressMapping === item.addressMapping
        );
        if (existingItem) {
          existingItem.list.push({
            id: item.id,
            keyName: item.keyName,
            deviceCode: item.deviceCode,
          });
        } else {
          acc.push({
            addressMapping: item.addressMapping,
            status: item.status,
            groupNo: item.groupNo,
            list: [
              {
                id: item.id,
                keyName: item.keyName,
                deviceCode: item.deviceCode,
              },
            ],
          });
        }
        return acc;
      }, []);
      this.tableData = this.tableData.sort((a, b) => a.groupNo - b.groupNo); //排序
    },
    // 探测器列表
    async getDetectorProductList() {
      this.namealarm = "";
      let res = await reqDetectorProductList();
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.detectorProductList = res.data.list;
      // console.log(this.detectorProductList,'this.detectorProductList');
      this.detectorProductList.push(
        {
          detectorType: "DoorMagnetism",
          name: "门磁",
        },
        {
          detectorType: "Camera",
          name: "摄像机",
        },
        {
          detectorType: "GasSensor",
          name: "燃气",
        },
        {
          detectorType: "Infrared",
          name: "红外",
        },
        {
          detectorType: "SmokeAlarm",
          name: "烟感",
        },
        {
          detectorType: "FireHydrant",
          name: "消防水压",
        },
        {
          detectorType: "TemperatureAlarm",
          name: "温感",
        },
        {
          detectorType: "WaterSensor",
          name: "水浸",
        },
        {
          detectorType: "PressureGauge",
          name: "无线数字压力表",
        },
        {
          detectorType: "TankGauge",
          name: "无线数字液位表",
        },
        {
          detectorType: "UserTransferDevice",
          name: "用户传输装置",
        },
        {
          detectorType: "ElectricalMeasurement",
          name: "电气测控装置",
        },
        {
          detectorType: "FaultArc",
          name: "故障电弧探测器",
        },
        {
          detectorType: "SoundLightVoiceAlarm",
          name: "声光报警器",
        },
        {
          detectorType: "FireAlarmController",
          name: "火灾报警控制器",
        }
      );
      this.detectorProductList.forEach((item) => {
        if (item.detectorType == this.dialogAlarmInfo.deviceType) {
          this.namealarm = item.name;
        }
      });
    },
    // 探测器查询主机详情
    async getDetector(imei) {
      let res = await reqDetector(imei);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.detail = res.data.detail;
    },
    // 指令下发
    async submitFinish2() {
      //   console.log(this.keyCommandsend, "this.keyCommandsend");
      var res = await reqKeyCommandSend({
        // deviceCode: this.detail.parentDeviceCode, //父设备编号
        deviceCode: this.keyCommandsend.deviceCode,
        id: this.keyCommandsend.id,
      });
      if (res.code !== 20000) {
        this.dialogVisibleFinish2 = false;
        this.$modal.notifyWarning(res.message);
        return;
      }
      this.$modal.notifySuccess("指令下发成功");
      this.dialogVisibleFinish2 = false;
    },
    closeDialogFinish2() {
      this.dialogVisibleFinish2 = false;
    },
    getKeyCommandsend(item) {
      this.dialogVisibleFinish2 = true;
      this.keyCommandsend = item;
    },
    onAlarm() {
      if (this.isAudioFlag) {
        this.$emit("pauseAudio");
      } else {
        this.$emit("onplayAudio");
      }
      this.isAudioFlag = !this.isAudioFlag;
    },
    closeDialogFinish() {
      this.dialogVisibleFinish = false;
    },
    // 点击接听对象
    async onVoiceLog() {
      this.$notify.closeAll();
      // let res = await reqPageVoiceLog(1, 1, {
      //     alarmId: this.dialogAlarmInfo.id,
      // });
      // if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      // if (!res.data.total) return this.$modal.notifyWarning("暂无数据");
      this.$refs.refVoiceLog.dialogVisible = true;
      this.$refs.refVoiceLog.PageSmsLog();
    },
    // 点击取消和关闭按钮
    cancelAddDia() {
      // console.log("取消");
      this.detail = {};
      // this.getVoice()
      this.dialogVisible = false;
      this.$parent.pauseAudio(); // 停止铃声
      if (this.dialogAlarmInfo.alarmType == "30") {
        this.$refs.refcontent_center.destroy();
      } else {
        this.$refs.refcontent_left.getloginOut();
      }
      if (this.detail.parentDeviceCode) {
        // 探测器
        this.$refs.refright_video.getloginOut();
      }
    },
    getpauseAudio() {
      this.$parent.pauseAudio(); // 停止铃声
    },
    // getVoice() {
    //   if (this.isVoice) {
    //     this.$parent.pauseAudio()   // 停止铃声
    //   }
    // },
    Alarmchuli(e) {
      this.$refs.refWarnHandle.dialogVisible = true;
      this.$refs.refWarnHandle.setalarmFactor(e);
    },
    oncommand() {
      this.$refs.refCommand.dialogVisible = true;
      // this.$refs.refCommand.setalarmFactor(e);
    },
    gridding() {
      this.$refs.refCamara.i = 0;
      this.$refs.refCamara.dialogVisible = true;
      this.$refs.refCamara.GetCamera(
        this.dialogAlarmInfo.spaceId,
        this.dialogAlarmInfo.id
      ); // 安装点查询摄像头 1583020697800630273
    },
    gridding2() {
      this.$refs.refCamara.i = 0;
      this.$refs.refCamara.dialogVisible = true;
      this.$refs.refCamara.GetCamera2(this.frontDeviceRelatedVO); // 安装点查询摄像头 1583020697800630273
    },
    onvideoDetails(e) {
      // console.log(e);
      if (e.protocol == "4") {
        // 萤石云
        // this.$refs.refFluoriteVideo.dialogVisible = true;
        // this.$refs.refFluoriteVideo.gettoken(e);

        this.$refs.refEZUIKitJs.dialogVisible = true;
        this.$refs.refEZUIKitJs.gettoken(e);
      } else {
        // 宏视
        this.$refs.refliveMacrovision.dialogVisible = true;
        this.$refs.refliveMacrovision.init(e.deviceId);
        this.$refs.refliveMacrovision.getPlayList(e.imei); //imei查询告警视频列表
      }
    },
    async clickIchnography() {
      const res = await reqFloorById(this.dialogAlarmInfo.spaceId);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      if (res.data.rows.image == "")
        return this.$modal.notifyWarning("当前楼层暂无平面图,请上传后操作!");
      this.$refs.refIchnography.dialogVisible = true;
      this.$refs.refIchnography.getimage(res.data.rows.image);
      this.$refs.refIchnography.getGetMark(this.dialogAlarmInfo, res.data.rows.id);
    },
    // 更新告警处理记录
    updateAlarmList(id, status) {
      this.dialogAlarmInfo.status = status;
      if (status == '2') {
        this.$parent.updateAlarmList2(id); // 处理成功后更新告警列表
      }
      if (status == '3') {
        this.$parent.updateAlarmList3(id); // 处理成功后更新告警列表
      }
    },
    addSubmit() {
      this.dialogVisibleFinish = true;
    },
    // 确认完结
    async submitFinish() {
      let res = await reqClosedLoop({
        id: this.dialogAlarmInfo.id,
      });
      // console.log(res);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.$modal.notifySuccess("完结成功");
      this.dialogAlarmInfo.status = "3";
      this.dialogVisible = false;
      this.closeDialogFinish();
      this.$parent.updateAlarmList2(this.dialogAlarmInfo.id);
      this.datav.end = !this.datav.end;
      this.$store.commit("saveEnd", this.datav.end); //完结后处理中-1
    },
  },
  created() { },
  mounted() { },
};
</script>

<style lang="less" scoped>
@keyframes blink {

  0%,
  100% {
    box-shadow: 0 0 60px 15px red;
  }

  50% {
    box-shadow: 0 0 60px 15px transparent;
  }
}

::v-deep .el-dialog__body {
  //   background: #061a5e !important;
  //   opacity: 0.8;
  background: none !important;
  // min-height: 552px;
  overflow-y: auto;
  padding: 20px;
  color: #f1f1f1;
}

.div_box {
  // height: 79vh;
  // height: calc(100vh - 122px);
  overflow: auto;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;

  .content {
    display: flex;
    width: 100%;
    height: 73vh;

    .content_left {
      flex: 1;

      .organization {
        height: 30%;
        margin-bottom: 1.5vh;
      }

      .cassociated {
        height: 16%;
        margin-bottom: 1.5vh;
      }

      .record {
        height: 43%;
        margin-bottom: 1.5vh;
      }

      .command {
        height: 32%;
      }
    }

    .content_center {
      flex: 2;
      margin: 0 1.5vh;

      .content_center1 {
        height: 10%;
        background: url("../../../assets/images/datavPop/alarm.png") no-repeat;
        background-size: 100% 100%;
        margin-bottom: 1.5vh;

        // background: url("../../../assets/images/datavPop/alarm.png") no-repeat;
        // background-position: bottom center; /* 背景图片从底部中央开始 */
        // background-size: auto; /* 保持图片原始大小 */
      }

      .content_center2 {
        height: 88%;
        background: url("../../../assets/images/datavPop/alarm.png") no-repeat;
        background-size: 100% 100%;
      }
    }

    .content_right {
      flex: 1;

      .responder {
        height: 53% !important;
        margin-bottom: 1.5vh;
      }

      .refright-video {
        height: 53% !important;
        margin-bottom: 1.5vh;
      }

      .content-right {
        height: 45%;
      }
    }
  }
}

::v-deep .video-player {
  // width: 100vw !important;
  width: 100% !important;
}

.video-ctrl-box {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: #93b1ff;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);

  .ctrl-circle {
    position: absolute;
    width: 70px;
    height: 70px;
    background: #506ab8;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #f1f1f1;
  }

  i {
    cursor: pointer;
    position: absolute;
    color: #072069;

    &:active {
      color: #409eff;
    }
  }

  .el-icon-caret-left {
    top: 47%;
    left: 27px;
    transform: translateX(-50%) scale(1.5);
  }

  .el-icon-caret-right {
    top: 48%;
    right: 11px;
    transform: translateX(-50%) scale(1.5);
  }

  .el-icon-caret-top {
    left: 50%;
    transform: translateX(-50%) translateY(17px) scale(1.5);
  }

  .el-icon-caret-bottom {
    left: 50%;
    bottom: 35px;
    transform: translateX(-50%) translateY(16px) scale(1.5);
  }
}

::v-deep .el-dialog__header {
  display: block !important;
  //   background: #061a5e;
  border-bottom: 1px solid#06b1e76e;
  background: #09143f !important;
  padding: 20px !important;
  border-radius: 10px 10px 0 0;

  .el-dialog__title {
    // color: #f1f1f1;
    // color: #4eaef2 !important;
    // font-weight: 600;
  }
}

// 未处理告警
::v-deep .unel_dialog .el-dialog__header {
  background: linear-gradient(to bottom, #e64b4b, #b61515) !important;
}

::v-deep .el-dialog__headerbtn {
  top: 28px !important;
}

::v-deep .el-dialog__headerbtn .el-dialog__close {
  // color: #f1f1f1;
  color: #fff !important;
  font-size: 20px;
}

::v-deep .el-dialog__body {
  //   background: #061a5e !important;
  //   opacity: 0.8;
  background: none !important;
  min-height: 120px !important;
  // min-height: 76vh;
  overflow-y: auto;
  padding: 20px !important;
  color: #f1f1f1;
}

::v-deep .el-dialog {
  width: 86%;
  overflow-y: auto;
  // min-height: 76vh;
  // background: #09143F;
  background: rgba(9, 20, 63, 1);
  border-radius: 10px;
}

::v-deep .another_class .el-dialog {
  width: 1150px;
}

// 未处理告警
::v-deep .unel_dialog .el-dialog {
  /* 添加 box-shadow 来模拟模糊边框 */
  box-shadow: 0 0 60px 15px red;
  animation: blink 1s linear infinite;
}

.dialog-title {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;

  .title {
    color: #fff !important;
    font-size: 20px;
    font-weight: 600;
    display: flex;
    align-items: baseline;

    // margin-left: 13px;
    span {
      margin: 0 13px;
    }

    div {
      font-size: 12px;
      border: 2px solid #00edfe;
      margin: 0 13px;
      cursor: pointer;
      padding: 3px 10px;
      box-sizing: border-box;
      border-radius: 5px;
      display: flex;
      align-items: center;

      i {
        font-weight: 500;
        margin-right: 5px;
      }
    }
  }

  .alarmGif {
    width: 29px;
    height: 29px;
    color: #fff;
    font-size: 30px;
  }
}

// 二次确认弹窗样式
::v-deep .finish .el-dialog__body {
  min-height: 50px !important;
}
</style>
